<template>
    <div v-if="apiServInfo" >
      <Card style="width:100%; margin-bottom: 12px;" >
        <p slot="title"><span style="font-weight: bold;">基础信息</span></p>
        <Table border :columns="baseColumns" :data="baseInfoList">
        </Table>
      </Card>
      <Card style="width:100%; margin-bottom: 12px;" >
        <p slot="title"><span style="font-weight: bold;">入参信息</span></p>
        <Table border :columns="requestColumns" :data="apiServInfo.requestParam">
        </Table>
      </Card>
      <Card style="width:100%; " >
        <p slot="title"><span style="font-weight: bold;">出参信息</span></p>
        <Table border :columns="responseBodyColumns" :data="apiServInfo.responseBody">
        </Table>
      </Card>
    </div>
</template>

<script>
  export default {
    name: "open_api_platform_model",
    components: {},
    data() {
      return {
        baseInfoList: [],
        baseColumns:[
          {
            title: '名称',
            key: 'name',
            maxWidth: 140,
            align: 'left',
          },
          {
            title: '描述',
            key: 'label',
            align: 'left',
          },
          {
            title: '名称',
            key: 'name2',
            maxWidth: 140,
            align: 'left',
          },
          {
            title: '描述',
            key: 'label2',
            align: 'left',
          },
        ],
        requestColumns:[
          {
            title: '入参标识',
            key: 'name',
            align: 'left',
          },
          {
            title: '入参中文名',
            key: 'label',
            align: 'left',
          },
          {
            title: '必填',
            key: 'required',
            width: 100,
            align: 'left',
          },
          {
            title: '缺省值',
            key: 'defaultVal',
            align: 'left',
          }
        ],
        responseBodyColumns:[
          {
            title: '出参标识',
            key: 'name',
            align: 'left',
          },
          {
            title: '出参中文名',
            key: 'label',
            align: 'left',
          },
          {
            title: '字段类型',
            width: 140,
            key: 'required',
            align: 'left',
          }
        ]
      }
    },
    props: {
      value: {},
      apiTitle: {},
      apiServInfo: {}
    },
    created: function() {
      this.setBaseInfo()
    },
    mounted() {

    },

    methods: {
      setBaseInfo(){
        this.baseInfoList = [
          {
            name: "API中文名",
            label: this.apiServInfo.apiLabel,
            name2: "API标识",
            label2: this.apiServInfo.apiCode
          },
          {
            name: "请求方法",
            label: this.apiServInfo.requestMethod,
            name2: "请求路径",
            label2: this.apiServInfo.requestUrl
          },
          {
            name: "数据返回类型",
            label: this.apiServInfo.responseType,
            name2: "描述",
            label2: this.apiServInfo.apiDescr
          },
          {
            name: "创建时间",
            label: this.apiServInfo.createDt,
            name2: "发布日期",
            label2: this.apiServInfo.publishDate
          },
          {
            name: "生效时间",
            label: this.apiServInfo.effDt,
            name2: "失效时间",
            label2: this.apiServInfo.expDt
          },
          {
            name: "API归属团队标识",
            label: this.apiServInfo.teamName,
            name2: "目录标识",
            label2: this.apiServInfo.archName
          },
        ]
      }
    },
    computed: {
    },
  }
</script>

<style>
</style>
